<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.54">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-128126650-1","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128126650-1"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-128126650-1",{})</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&family=Roboto:wght@900&display=swap">

<title data-react-helmet="true">gulp.js</title>

<meta data-react-helmet="true" property="og:title" content="gulp.js"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.png">


<link rel="stylesheet" href="/styles.8121b95c.css">

<link rel="stylesheet" href="/c4f5d8e4.5dc72ed1.css">


<link rel="preload" href="/styles.10c0193b.js" as="script">

<link rel="preload" href="/runtime~main.ae01ffbb.js" as="script">

<link rel="preload" href="/main.3e1928f1.js" as="script">

<link rel="preload" href="/1.fe6bacd8.js" as="script">

<link rel="preload" href="/2.77a8f44b.js" as="script">

<link rel="preload" href="/38.f1026511.js" as="script">

<link rel="preload" href="/c4f5d8e4.076cddbf.js" as="script">

</head>
<body>

<div id="__docusaurus">
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><a class="navbar__brand" target="_self" href="/"><img class="navbar__logo" src="/img/gulp.svg" alt="gulp"></a><a activeclassname="navbar__link--active" class="navbar__item navbar__link noWrap_BxdH" href="/docs/en/getting-started/quick-start">Get Started</a><a activeclassname="navbar__link--active" class="navbar__item navbar__link noWrap_BxdH" href="/docs/en/api/concepts">API</a><a activeclassname="navbar__link--active" class="navbar__item navbar__link noWrap_BxdH" href="/plugins">Plugins</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/sponsors/gulpjs" class="navbar__item navbar__link noWrap_BxdH">Donate</a><a activeclassname="navbar__link--active" class="navbar__item navbar__link emphasis_1Gl9 noWrap_BxdH" href="/docs/en/support/for-enterprise">Enterprise</a></div><div class="navbar__items navbar__items--right"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/gulpjs" class="navbar__item navbar__link navbar__link--icon noWrap_BxdH"><img class="navbarIcon_2_MD" src="/img/twitter.svg" alt="Gulp on Twitter"></a><a target="_blank" rel="noopener noreferrer" href="https://medium.com/gulpjs" class="navbar__item navbar__link navbar__link--icon noWrap_BxdH"><img class="navbarIcon_2_MD" src="/img/medium.svg" alt="The gulp blog"></a><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon search-icon-hidden" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar-expanded"></div></div></div></nav><div class="main-wrapper"><main><div class="hero_3ShV"><div class="heroContent_1vRq"><h1 class="heroTagline_3QXP">A toolkit to automate &amp; enhance your workflow</h1><p class="heroDescription_2gbu">Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.</p></div><div class="heroVisual_2DIm"><ul class="techList_2IqV"><li class="techItem_slp-"><span class="techName_3A_7">TypeScript</span><span>Develop in any language</span></li><li class="techItem_slp-"><span class="techName_3A_7">PNG</span><span>Create assets with any tool</span></li><li class="techItem_slp-"><span class="techName_3A_7">Markdown</span><span>Write using any format</span></li></ul><svg class="visual_1P1j" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="582" height="306" fill="none" viewBox="0 0 582 306"><path fill="#E5E5E5" d="M0 0H582V306H0z"></path><g><path fill="#fff" d="M0 0H582V306H0z"></path><g><path fill="#fff" d="M8 2H576V305H8z"></path><path stroke="#CF4647" stroke-width="2" d="M8 3L576 3"></path><g><path stroke="#CF4647" stroke-width="2" d="M8 303L572 303"></path></g><path stroke="#0A0908" stroke-width="6" d="M66 4L66 118" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M66 4L66 118" class="line_up_anim_1Wzq"></path><path stroke="#0A0908" stroke-width="6" d="M281 4L281 99" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M281 4L281 99" class="line_up_anim_1Wzq"></path><path stroke="#0A0908" stroke-width="6" d="M293 191L293 304" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M293 191L293 304" class="line_down_anim_2_Ng" opacity="0.1"></path><path stroke="#0A0908" stroke-width="6" d="M63 121L267 121" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M63 121L267 121" class="line_up_anim_1Wzq second_1Ny5"></path><path stroke="#0A0908" stroke-width="6" d="M0 -3L114 -3" opacity="0.1" transform="matrix(0 1 1 0 509 4)"></path><path stroke="#CF4647" stroke-width="6" d="M0 -3L114 -3" class="line_up_anim_1Wzq" transform="matrix(0 1 1 0 509 4)"></path><path stroke="#0A0908" stroke-width="6" d="M0 -3L191 -3" opacity="0.1" transform="matrix(-1 0 0 1 509 124)"></path><path stroke="#CF4647" stroke-width="6" d="M0 -3L191 -3" class="line_up_anim_1Wzq second_1Ny5" opacity="0.1" transform="matrix(-1 0 0 1 509 124)"></path><path stroke="#0A0908" stroke-width="6" d="M278 183H98" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M278 183H98" class="line_down_anim_2_Ng" opacity="0.1"></path><path stroke="#0A0908" stroke-width="6" d="M101.216 186L101 302" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M101.216 186L101 302" class="line_down_anim_2_Ng second_1Ny5" opacity="0.1"></path><path stroke="#0A0908" stroke-width="6" d="M304 154l162 .003" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M304 154l162 .003" class="line_down_anim_2_Ng" opacity="0.1"></path><path stroke="#0A0908" stroke-width="6" d="M463 156l.3 148" opacity="0.1"></path><path stroke="#CF4647" stroke-width="6" d="M463 156l.3 148" class="line_down_anim_2_Ng second_1Ny5" opacity="0.1"></path><g filter="url(#filter0_d)"><path fill="#F6F8FA" d="M210 57H374V221H210z"></path></g><path fill="url(#pattern0)" d="M260 64H320V201H260z"></path><path stroke="#CF4647" stroke-width="6" d="M210.5 56.5H373.5V220.5H210.5z" class="line_rectangle_2GxA"></path></g></g><defs><filter id="filter0_d" width="172" height="172" x="208" y="56" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dx="2" dy="3"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter><pattern id="pattern0" width="1" height="1" patternContentUnits="objectBoundingBox"><use transform="matrix(.00448 0 0 .00196 -.01 0)" xlink:href="#image0"></use></pattern><image id="image0" width="228" height="510" data-name="gulp-2x.png" xlink:href="/img/gulp-2x.png"></image></defs></svg><ul class="techList_2IqV"><li class="techItem_slp-"><span class="techName_3A_7">JavaScript</span><span>Get compiled code</span></li><li class="techItem_slp-"><span class="techName_3A_7">WebP</span><span>Get optimized images</span></li><li class="techItem_slp-"><span class="techName_3A_7">HTML</span><span>Get rendered content</span></li></ul></div></div><div class="banner_1qic"><ul class="companyLogos_bBrY"></ul><a class="supportButton_2bSW" href="https://github.com/sponsors/gulpjs?tier_id=24682" target="_blank" rel="noopener noreferrer"><span class="supportTitle_3grU">Organization Support</span><span class="supportDescription_2P33">Provide gulp with ongoing support and we’ll let our users know!</span></a></div><div class="benefits_2jZD"><div class="card benefitCard_3UiV"><div class="card__image"><img src="/img/flexible.png" alt="Flexible sample"></div><div class="card__header"><h2>Flexible</h2></div><div class="card__body"><p>Using code over configuration, utilize all of JavaScript to create your gulpfile—where tasks can be written using your own code or chained single purpose plugins.</p></div></div><div class="card benefitCard_3UiV"><div class="card__image"><img src="/img/composable.png" alt="Composable sample"></div><div class="card__header"><h2>Composable</h2></div><div class="card__body"><p>Write individual, focused tasks and compose them into larger operations, providing you with speed and accuracy while reducing repetition.</p></div></div><div class="card benefitCard_3UiV"><div class="card__image"><img src="/img/efficient.png" alt="Efficient sample"></div><div class="card__header"><h2>Efficient</h2></div><div class="card__body"><p>By using gulp streams, you can apply many transformations to your files while in memory before anything is written to the disk—significantly speeding up your build process.</p></div></div></div><div class="plugins_2Egq"><div class="pluginsText_hpPj"><h2>Connecting plugins</h2><p>Using community-built plugins is a quick way to get started with gulp. Each plugin does a small amount of work, so you can connect them like building blocks. Chain together plugins from a variety of technologies to reach your desired result.</p><p class="pluginsCTA_3PIb">Browse the <a to="plugins" href="plugins">community plugins</a> to see what’s available!</p></div><div class="pluginsGrid_2Cuk"><a class="pluginCard_2Fof" href="https://www.npmjs.com/package/gulp-babel" target="_blank" rel="noopener noreferrer"><img class="pluginLogo_2ts-" src="/img/babel.svg" alt="Babel logo"><span class="pluginName__j34">Babel</span></a><a class="pluginCard_2Fof" href="https://www.npmjs.com/package/gulp-sass" target="_blank" rel="noopener noreferrer"><img class="pluginLogo_2ts-" src="/img/sass.png" alt="SASS logo"><span class="pluginName__j34">SASS</span></a><a class="pluginCard_2Fof" href="https://www.npmjs.com/package/gulp-typescript" target="_blank" rel="noopener noreferrer"><img class="pluginLogo_2ts-" src="/img/typescript.png" alt="TypeScript logo"><span class="pluginName__j34">TypeScript</span></a><a class="pluginCard_2Fof" href="https://www.npmjs.com/package/gulp-autoprefixer" target="_blank" rel="noopener noreferrer"><img class="pluginLogo_2ts-" src="/img/autoprefixer.png" alt="Autoprefixer logo"><span class="pluginName__j34">Autoprefixer</span></a><a class="pluginCard_2Fof" href="https://www.npmjs.com/package/gulp-imagemin" target="_blank" rel="noopener noreferrer"><img class="pluginLogo_2ts-" src="/img/imagemin.png" alt="Imagemin logo"><span class="pluginName__j34">Imagemin</span></a><a class="pluginCard_2Fof" href="https://www.npmjs.com/package/gulp-pug" target="_blank" rel="noopener noreferrer"><img class="pluginLogo_2ts-" src="/img/pug.svg" alt="Pug logo"><span class="pluginName__j34">Pug</span></a></div></div><div class="backers_1ZkG"><div class="backersText_2kBz"><h2>Individual backers</h2><p>Since 2013, gulp has been the toolkit of choice for developers and designers alike. Not only do we have communities who’ve relied on us since the beginning, but there’s also a constant flow of new users who find out how great their workflow can be with gulp.</p><p>Gulp needs your help! We want to continue expanding our team and find even more contributors from every discipline to maintain and improve the project you love!</p></div><div class="tier_DBsK"><h3 class="tierTitle_1VuC">$2 each month</h3><p>Thanks for supporting us. Every contribution helps us maintain and improve gulp!</p><a class="tierButton_2TWj" href="https://github.com/sponsors/gulpjs?tier_id=24679" target="_blank" rel="noopener noreferrer">Donate $2</a></div><div class="tier_DBsK"><h3 class="tierTitle_1VuC">$5 each month</h3><p>We&#x27;ll rotate your avatar through the individual contributors banner below.</p><a class="tierButton_2TWj" href="https://github.com/sponsors/gulpjs?tier_id=24680" target="_blank" rel="noopener noreferrer">Donate $5</a></div><div class="tier_DBsK"><h3 class="tierTitle_1VuC">$10 each month</h3><p>We&#x27;ll thank you on Twitter and rotate your avatar through the individual contributors banner below.</p><a class="tierButton_2TWj" href="https://github.com/sponsors/gulpjs?tier_id=24681" target="_blank" rel="noopener noreferrer">Donate $10</a></div></div><div class="backers_3qIp"></div></main></div><footer class="footer"><div class="container"><div class="row footer__links"><div class="col footer__col"><ul class="footer__items"><li class="footer__item"><img src="/img/gulp-white-logo.svg" alt="gulp" href="/"></li></ul></div><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/en/getting-started/quick-start">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/en/api/concepts">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://github.com/gulpjs/gulp">GitHub</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/tagged/gulp">Stack Overflow</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://twitter.com/gulpjs">Twitter</a></li></ul></div></div><div class="text--center"><div></div></div></div></footer>
</div>

<script src="/styles.10c0193b.js"></script>

<script src="/runtime~main.ae01ffbb.js"></script>

<script src="/main.3e1928f1.js"></script>

<script src="/1.fe6bacd8.js"></script>

<script src="/2.77a8f44b.js"></script>

<script src="/38.f1026511.js"></script>

<script src="/c4f5d8e4.076cddbf.js"></script>


</body>
</html>